<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配送员工作台 - 物流订单跟踪系统</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- 引入主题CSS -->
    <link rel="stylesheet" href="/css/theme.css">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="css/delivery.css">
    <!-- 高德地图API -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=c1c30b5cd6070eb5d55dbb33ce06d372"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">配送员工作台</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" id="myOrdersLink">我的订单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="availableOrdersLink">可接单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="myProfileLink">个人信息</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center">
                    <div class="me-3 text-light" id="deliveryPersonInfo">
                        <span id="statusIndicator" class="status-indicator status-offline"></span>
                        <span id="deliveryPersonName">加载中...</span>
                        <span id="deliveryPersonStatus" class="badge bg-secondary ms-1">离线</span>
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-light dropdown-toggle" type="button" id="statusDropdown" data-bs-toggle="dropdown">
                            更改状态
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-status="IDLE">空闲</a></li>
                            <li><a class="dropdown-item" href="#" data-status="DELIVERING">配送中</a></li>
                            <li><a class="dropdown-item" href="#" data-status="BUSY">忙碌</a></li>
                            <li><a class="dropdown-item" href="#" data-status="OFFLINE">离线</a></li>
                        </ul>
                    </div>
                    <a href="/logout" class="btn btn-outline-light ms-2">退出登录</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="container mt-4 content-wrapper">
        <!-- 警告/提示信息区域 -->
        <div id="alertArea" class="mb-3" style="display: none;"></div>

        <!-- 我的订单视图 -->
        <!-- 在我的订单视图中添加可接单列表 -->
        <div id="myOrdersView">
            <h2 class="mb-3">我的订单</h2>
            
            <!-- 添加新订单通知区域 -->
            <div id="newOrdersArea" class="mb-4" style="display: none;">
                <div class="card border-primary">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="bi bi-bell"></i> 新订单通知</h5>
                        <button type="button" class="btn-close btn-close-white" aria-label="Close" id="closeNewOrdersBtn"></button>
                    </div>
                    <div class="card-body" id="newOrdersList">
                        <!-- 新订单将在这里动态显示 -->
                        <p class="text-center text-muted">正在等待新订单...</p>
                    </div>
                </div>
            </div>
            
            <!-- 原有的订单列表 -->
            <div class="row">
                <div class="col-md-8">
                    <div id="ordersList" class="mb-4">
                        <!-- 订单卡片将在这里动态生成 -->
                        <div class="text-center py-5" id="ordersLoader">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2">正在加载订单...</p>
                        </div>
                        <div id="noOrdersMessage" style="display: none;" class="text-center py-5">
                            <i class="bi bi-inbox fs-1 text-muted"></i>
                            <p class="mt-2">您目前没有待处理的订单</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card sticky-top" style="top: 70px;">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">当前位置</h5>
                        </div>
                        <div class="card-body">
                            <div id="currentLocationMap" class="map-container mb-3"></div>
                            <button id="updateLocationBtn" class="btn btn-primary w-100">
                                <i class="bi bi-geo-alt"></i> 更新我的位置
                            </button>
                            <div class="mt-3 small text-muted">
                                <p class="mb-1"><i class="bi bi-info-circle"></i> 位置信息用于：</p>
                                <ul class="ps-3 mb-0">
                                    <li>为您分配最近的订单</li>
                                    <li>向客户展示配送进度</li>
                                    <li>优化配送路线</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单详情视图 -->
        <div id="orderDetailView" style="display: none;">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2 class="mb-0">订单详情</h2>
                <button id="backToOrdersBtn" class="btn btn-outline-primary">
                    <i class="bi bi-arrow-left"></i> 返回订单列表
                </button>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4" id="orderDetailsCard">
                        <!-- 订单详情将在这里动态生成 -->
                    </div>
                    <div class="card mb-4">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">更新订单状态</h5>
                        </div>
                        <div class="card-body">
                            <form id="updateStatusForm" class="status-update-form">
                                <div class="mb-3">
                                    <label for="newStatus" class="form-label">新状态</label>
                                    <select class="form-select" id="newStatus" required>
                                        <!-- 状态选项将根据当前订单状态动态生成 -->
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="location" class="form-label">当前位置</label>
                                    <input type="text" class="form-control" id="location" placeholder="自动获取当前位置..." readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="description" class="form-label">备注说明</label>
                                    <textarea class="form-control" id="description" rows="2" placeholder="例如：已与收件人确认，预计下午3点送达"></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="bi bi-check-circle"></i> 更新状态
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">配送路线</h5>
                        </div>
                        <div class="card-body p-0">
                            <div id="orderRouteMap" class="map-container"></div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">物流轨迹</h5>
                        </div>
                        <div class="card-body" id="logisticsTraces">
                            <!-- 物流轨迹将在这里动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 个人信息视图 -->
        <div id="profileView" style="display: none;">
            <h2 class="mb-3">个人信息</h2>
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">配送员信息</h5>
                        </div>
                        <div class="card-body">
                            <div id="profileInfo">
                                <!-- 个人信息将在这里动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">工作统计</h5>
                        </div>
                        <div class="card-body">
                            <div id="workStats">
                                <!-- 工作统计将在这里动态生成 -->
                                <div class="text-center">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="mt-2">加载统计数据...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-light py-3 mt-4">
        <div class="container text-center">
            <p class="mb-0 text-muted">© 物流订单跟踪系统 - 配送员工作台</p>
        </div>
    </footer>

    <!-- 可接单视图 - 移动到这里 -->
    <div id="availableOrdersView" style="display: none;">
        <h2 class="mb-3">可接单列表</h2>
        <div class="row">
            <div class="col-md-12">
                <div id="availableOrdersList" class="mb-4">
                    <!-- 可接单列表将在这里动态生成 -->
                    <div class="text-center py-5" id="availableOrdersLoader">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2">正在加载可接单列表...</p>
                    </div>
                    <div id="noAvailableOrdersMessage" style="display: none;" class="text-center py-5">
                        <i class="bi bi-inbox fs-1 text-muted"></i>
                        <p class="mt-2">当前没有可接单的订单</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- 加载指示器 -->
    <div class="loader" id="mainLoader">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>

    <!-- 引入 Bootstrap JS 和其他脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 在其他脚本之前添加 -->
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.0/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    
    <!-- 引入拆分后的JS文件 -->
    <script src="js/utils.js"></script>
    <script src="js/core.js"></script>
    <script src="js/map.js"></script>
    <script src="js/api.js"></script>
    <script src="js/ui.js"></script>
    <script src="js/websocket.js"></script>
</body>
</html>